<!-- 继承base模板 -->
{% extends 'host/base.html' %}
<!-- 计算过滤器 -->
{% load filter %}
{% block title %} cpu信息 {% endblock %}
{% block content %}
    {% include 'host/cpu-header.html' %}
    <div>
        <div id="main" style="width: 80%;height:400px;"></div>
    </div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 首先，声明两个 javascript 的数组
        var series_data = []; // 纵轴数据
        var xAxis_data = []; // 横轴数据

        // 使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中
        {% for data in datas %}

            series_data.push({{ data.user_percent }})
            // 注意这里的双引号
            xAxis_data.push("{{ data.create_time}}")
        {% endfor %}

        option = {
            xAxis: {
                type: 'category',
                data: xAxis_data
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: series_data,
                type: 'line',
                smooth: true
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

{% endblock %}